<template>
	<view>
		
        <view>
            <view  class="nav-card top-fix">
                <block v-for="(item, index) in navigationList" :key="index">
                    <view :class="'index ' + (currentId == item.id ? 'active' : 'default')" @tap="selShopTc" :id="item.id">
                        <text>{{ item.name }}</text>
                    </view>
                </block>
            </view>
        </view>
		
	<view  style="margin-top: 16rpx;" v-for="(item,index) in fromlist" :key="index" :data-index="index">
		<delSlideLeft v-if="index === 0" style="margin-top: 75rpx;" :item="item"  :data_transit="{index:index,item:item}"  @delItem="delItem">
			 <view style="background-color:white;height: 250rpx">
				<view style="display: flex;align-items: center;">
				<view>
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">订单编号：</text>
					<text  style="font-size: 20rpx; color:black; margin-right: 16rpx;">{{item.outTradeNo}}</text>
				</view>
				
				</view>
				<view>
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">订单名称：</text>
					<text  style="font-size: 20rpx; color:black; margin-right: 16rpx;">{{item.orderDescribe}}</text>
				</view>
				<view v-if="item.status == 1">
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">支付方式：</text>
					<text  style="font-size: 20rpx; color:black; margin-right: 16rpx;">{{item.paymentMethodView}}</text>
				</view>
				<view v-if="item.status == 1">
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">金额：</text>
					<text  style="font-size: 20rpx; color:green; margin-right: 16rpx;">￥{{item.totalMoney}}</text>
				</view>
				<view v-if="item.status == 0">
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">金额：</text>
					<text  style="font-size: 20rpx; color:red; margin-right: 16rpx;">￥{{item.totalMoney}}</text>
				</view>
				<view v-if="item.status == 1">
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">订单状态：</text>
					<text  style="font-size: 20rpx; color:green; margin-right: 16rpx;">{{item.statusView}}</text>
				</view>
				<view v-if="item.status == 0">
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">订单状态：</text>
					<text  style="font-size: 20rpx; color:red; margin-right: 16rpx;">{{item.statusView}}</text>
				</view>
				<view>
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">订单创建时间：</text>
					<text  style="font-size: 20rpx; color:black; margin-right: 16rpx;">{{item.createTimeView}}</text>
				</view>
				<view v-if="item.status == 0"  style="display: flex;margin-left: 80%;">
					<view :id="item.coureswareid" :data-type="item.type" @tap="gotoOrder" style=" background-color: #f1f0f5;margin-left: 20rpx;width: 120rpx;  border-radius: 30rpx;display: flex;justify-content: center;align-items: center;">
						<text  style="font-size: 27rpx;">去支付</text>
					</view>
				</view>
			 </view>
		</delSlideLeft>
		<delSlideLeft v-else :item="item"  :data_transit="{index:index,item:item}"  @delItem="delItem">
			 <view style="background-color:white;height: 250rpx">
				<view style="display: flex;align-items: center;">
				<view>
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">订单编号：</text>
					<text  style="font-size: 20rpx; color:black; margin-right: 16rpx;">{{item.outTradeNo}}</text>
				</view>
				
				</view>
				<view>
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">订单名称：</text>
					<text  style="font-size: 20rpx; color:black; margin-right: 16rpx;">{{item.orderDescribe}}</text>
				</view>
				<view v-if="item.status == 1">
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">支付方式：</text>
					<text  style="font-size: 20rpx; color:black; margin-right: 16rpx;">{{item.paymentMethodView}}</text>
				</view>
				<view v-if="item.status == 1">
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">金额：</text>
					<text  style="font-size: 20rpx; color:green; margin-right: 16rpx;">￥{{item.totalMoney}}</text>
				</view>
				<view v-if="item.status == 0">
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">金额：</text>
					<text  style="font-size: 20rpx; color:red; margin-right: 16rpx;">￥{{item.totalMoney}}</text>
				</view>
				<view v-if="item.status == 1">
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">订单状态：</text>
					<text  style="font-size: 20rpx; color:green; margin-right: 16rpx;">{{item.statusView}}</text>
				</view>
				<view v-if="item.status == 0">
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">订单状态：</text>
					<text  style="font-size: 20rpx; color:red; margin-right: 16rpx;">{{item.statusView}}</text>
				</view>
				<view>
					<text  style="font-size: 20rpx;margin-left: 16rpx;font-weight: bold;">订单创建时间：</text>
					<text  style="font-size: 20rpx; color:black; margin-right: 16rpx;">{{item.createTimeView}}</text>
				</view>
				<view v-if="item.status == 0"  style="display: flex;margin-left: 80%;">
					<view :id="item.coureswareid" :data-type="item.type" @tap="gotoOrder" style=" background-color: #f1f0f5;margin-left: 20rpx;width: 120rpx;  border-radius: 30rpx;display: flex;justify-content: center;align-items: center;">
						<text  style="font-size: 27rpx;">去支付</text>
					</view>
				</view>
			 </view>
		</delSlideLeft>
	</view>
	
	<view v-if="fromlist.length == 0">
	      <view class="wushuju">
	          <image style="width: 100rpx; height: 70rpx" src="https://xxzhang.oss-cn-hangzhou.aliyuncs.com/%E6%97%A0%E6%95%B0%E6%8D%AE%20%281%29.png"></image>
	          <text style="color: darkgrey">暂无数据</text>
	      </view>
	  </view>
		
		

	</view>
</template>

<script>
	const app = getApp();
	var urlPrefix = app.globalData.urlPrefix;
	import delSlideLeft from '@/components/ay-operate/del_slideLeft.vue'
	export default {
		components:{
			delSlideLeft,
		},
		data() {
			return {
				  navigationList:[
					  {
					  id:3,
					  name:"全部",
					  },
					  {
					  id:1,
					  name:"已支付",
					  },  
					  {
					  id:0,
					  name:"未支付",
					  }
				  ],
				  currentId: 3,
				  userId:'',
				  fromlist: [],
				  token:null,
			}
		},

		 onPullDownRefresh() { // 停止下拉刷新
			
			 uni.request({
				url: urlPrefix + '/api/applet/myInfo/orderFromList?userId='+ this.userId + "&statusId="+this.currentId,
				method: 'GET',
				header: {
					'content-type': 'application/json',
					'token': this.token
				},
				success: function (res) {
					let dataList = res.data;
					that.setData({
						fromlist: dataList.datas,
					});
					uni.hideLoading();
				}
			 });
			 
		 
			uni.stopPullDownRefresh();  //停止刷新
			uni.showToast({
				title: '刷新成功',
				icon: 'none',
				duration: 2000
			});
		 },
		 
	
		
		onLoad (options) {
			var token = uni.getStorageSync('token');
			this.token = token
			uni.showLoading({
			      title: '加载中',
			});
			let that = this;
			this.userId = options.userId;
				uni.request({
					url: urlPrefix + '/api/applet/myInfo/orderFromList?userId='+ options.userId + "&statusId=3",
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: function (res) {
						let dataList = res.data;
						that.setData({
							fromlist: dataList.datas,
						});
						uni.hideLoading();
					}
				});
		},
		methods: {
			selShopTc: function (res) {
				uni.showLoading({
				      title: '加载中',
				});
			    let that = this;
			   uni.request({
			       url: urlPrefix + '/api/applet/myInfo/orderFromList?statusId=' + res.currentTarget.id+"&userId="+this.userId,
			       method: 'GET',
			       header: {
					   'token': this.token,
			           'content-type': 'application/json'
			       },
			       success: function (suss) {
			           let dataList = suss.data;
			           that.setData({
			               currentId: res.currentTarget.id,
			               fromlist: dataList.datas
			           });
			       }
			   });
			   uni.hideLoading();
			},
			
			
			gotoOrder(res){
				console.log(res.currentTarget.dataset.type)
				if(res.currentTarget.dataset.type == 0){
					uni.navigateTo({
					    url: '/pages/coursewaredetails/coursewaredetails?id=' + res.currentTarget.id
					});
				}else if(res.currentTarget.dataset.type == 1){
					uni.navigateTo({
					    url: '/pages/recharge/recharge'
					});
				}else if(res.currentTarget.dataset.type == 2){
					uni.navigateTo({
					    url: '/pages/applyFor/applyFor'
					});
				}
				

			},
			
			
			delItem: function(e){
			
				let that = this;
				let a = that.fromlist.splice(e.data.index, 1);
				let id = a[0].id;
				uni.request({
						   url: urlPrefix + '/api/applet/myInfo/delOrderFromById?id=' + id,
						   method: 'GET',
						   header: {
							   'content-type': 'application/json',
							    'token': this.token,
						   },
						   success: function (suss) {
							  uni.showToast({
							  	title: '删除成功',
							  	icon: 'none',
							  	duration: 2000
							  })
						   }
			         });
				
			},
			// loadMore() {
			// 	let self = this;
			//       try {
			//        uni.request({
			//                    url: urlPrefix + '/api/applet/myInfo/orderFromList?userId=' + this.userId+"&pageSize="+this.pageSize+"&pageNum="+this.page+"&statusId="+this.currentId,
			//                    method: 'GET',
			//                    header: {
			//                        'content-type': 'application/json'
			//                    },
			//                    success: function (suss) {
			// 					   if(suss.data.datas.records.length>0){
			// 						   self.fromlist = self.fromlist.concat(suss.data.datas.records);
			// 						   self.page += 1;
			// 					   }else{
			// 						      self.hasMore = false; // 数据加载完毕，没有更多数据了
			// 					   }
			//                    }
			//          });
			//       } catch (error) {
			//         console.error('数据加载失败:', error);
			//       }
			// },
		}
	}
</script>
<style lang="scss">
@import './orderFrom.scss';
</style>
